<template>
	<view class="pb130">
		<view class="p3">
			<mg-cell v-for="(v,i) in arr" :key='i' cname="23 mb30 bs20" last="1">
				<view slot='bd' class="mr30">
					<view class="f30">{{v.name}}<text class="f24 c9 ml20">(排序:{{v.sort}})</text></view>
					<view class="f-raw">
						<view class="bf5 c9 mr20 mt20 f24 bs10 bq" v-for="(sv,si) in v.attr_str" :key='si'>{{sv.sxz}}
						</view>
					</view>
				</view>
				<view @click="sz(v)" slot='ft' class="b-df bs10 p-5-20 f26 c3">设置</view>
			</mg-cell>
		</view>
		<view class="foot-btnc mt30">
			<button @click="xjfl" :loading="loading" :disabled="loading" class="foot-btn2" :style="{background:tColor}"
				hover-class="btnhc">新增属性</button>
		</view>
		<mg-as v-model="show" :list='list' @con='asdj'></mg-as>
		<mg-modal :vs='true' :ismr="true" v-model="showtc" width="650rpx" :z-index="3000">
			<view class="bs10 bf p-r">
				<text @click="showtc=false" class="ggx p-a iconfont iconcuo f50 c9"></text>
				<view class="p20 ggh f-c f32">
					<view class="t-o-e t-c" style="width: 80%;">{{isxz?'新增':'保存'}}属性</view>
				</view>
				<view class="ggb">
					<mg-input cname="p23" t='number' v-model="params.sort" isr='1' ht='排序' htc='f30' :pr='`请输入排序`'
						icn='f30' />
					<mg-input cname="p23" v-model="params.name" isr='1' ht='属性名称' htc='f30' :pr='`请输入属性名称`' icn='f30' />
					<mg-cell cname="p332" isr='1' last="1">
						<template slot='bd'>
							<view class="c3 f30">属性值</view>
							<view class="f26">
								<view v-for="(v,i) in ggarr" :key='i' class="mt20 f-y-c">
									<input v-model="v.sxz" class="f-1 weui-input b-df mr30 bs10 p02"
										placeholder="请输入属性值"></input>
									<view @click="scgg(i)" class="bs10 p-8-20 cf ml20" :style="{background:tColor}">删除
									</view>
								</view>
								<view v-if="ggarr.length < 20" class="f-x-bt mt20">
									<view @click="tjggz" class="ggi f-c jggz cf7c f26" :style="{borderColor:tColor}">
										+添加属性值</view>
								</view>
							</view>
						</template>>
					</mg-cell>
				</view>
				<button class="foot-btn3 w33" :style="{background:tColor}" @click="save" :disabled="loading"
					:loading="loading" style="margin: 30rpx auto;" hover-class="btnhc">确定</button>
			</view>
		</mg-modal>
		<mg-modal :vs='true' :ismr="true" v-model="showtc2" width="600rpx" :z-index="999">
			<view class="bs10 bf p-r">
				<text @click="showtc2=false" class="ggx p-a iconfont iconcuo f50 c9"></text>
				<view class="p20 ggh f-c f32">
					<view class="t-o-e t-c" style="width: 80%;">新增属性值</view>
				</view>
				<mg-input cname="p23" t='number' v-model="xzsxz" isr='1' ht='属性值' htc='f30' :pr='`请输入`' icn='f30' />
				<button class="foot-btn3 w33" :style="{background:tColor}" @click="save2" :disabled="loading2"
					:loading="loading2" style="margin: 30rpx auto;" hover-class="btnhc">确定</button>
			</view>
		</mg-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import mgAs from '@/components/form/mg-as.vue'
	import mgModal from '@/components/common/modal.vue'
	import mgInput from '@/components/form/mg-input.vue'
	import mgPhoto from '@/components/form/mg-photo.vue'
	import utils from '@/common/utils.js'
	export default {
		name: 'ggsz',
		components: {
			mgAs,
			mgModal,
			mgInput,
			mgPhoto,
		},
		data() {
			return {
				arr: [],
				show: false,
				list: [{
					n: '编辑',
					t: 'bj',
					// }, {
					// 	n: '新增属性值',
					// 	t: 'xz',
					// 	hide: false,
				}, {
					n: '删除',
					t: 'sc',
					c: '#F77C00'
				}],
				showtc: false,
				ggarr: [],
				showtc2: false,
				params: {
					id: '',
					sort: '',
					name: '',
					attr_str: []
				},
				isxz: false,
				loading: false,
				loading2: false,
				xzsxz: '',
			}
		},
		onLoad(options) {
			// this.getSystem()
			this.util.setNT('属性设置')
			this.refreshList()
		},
		computed: {},
		methods: {
			async refreshList() {
				try {
					let {
						data
					} = await this.util.request({
						'url': this.api.spsxlb,
					})
					this.arr = data
				} catch (e) {}
			},
			sz(v) {
				this.show = true
				this.flInfo = v
			},
			async asdj(v) {
				let obj
				switch (v.t) {
					case 'bj':
						this.isxz = false
						this.show = false
						this.params.id = this.flInfo.id
						let {
							data
						} = await this.util.request({
							'url': this.api.spsxlb,
							ct: 1,
							mask: 1,
							data: this.params,
						})
						for (let k in this.params) this.params[k] = data[k]
						this.ggarr = data.attr_str
						this.showtc = true
						return;
					case 'xz':
						this.show = false
						this.showtc2 = true
						return;
					case 'sc':
						obj = {
							title: `您确认删除吗？`,
							url: 'spsxsc',
							params: {
								id: this.flInfo.id,
							}
						}
						break;
				}
				try {
					await this.util.modal(obj.title)
					this.show = false
					let data = await this.util.request({
						'url': this.api[obj.url],
						method: 'POST',
						mask: 1,
						data: obj.params,
					}).catch(() => {

					})
					if (data) {
						this.util.message('操作成功', 1)
						this.refreshList()
					}
				} catch (e) {}
			},
			xjfl() {
				this.isxz = true
				this.params.id = ''
				this.showtc = true
				this.ggarr = []
			},
			tjggz() {
				this.ggarr.push({
					sxz: ''
				})
			},
			scgg(i) {
				this.ggarr.splice(i, 1)
			},
			async save() {
				let judgeData = utils.isFailParams({
					field: this.params,
					filter: this.isxz ? ['id', 'attr_str'] : ['attr_str'],
					tips: {
						id: '缺少id',
						sort: '请输入排序',
						name: '请输入名称',
						body: '请输入说明',
					}
				})
				if (!judgeData) {
					return
				} else {
					if (!this.ggarr.length) return this.util.message('请添加属性值', 3)
					if (this.ggarr.map(v => v.sxz.trim()).includes('')) return this.util.message('请完善属性值', 3)
					this.loading = true
					this.params.attr_str = utils.deepCopy(this.ggarr)
					let res = await this.util.request({
						'url': this.api.spsxtj,
						method: 'POST',
						ct: 1,
						mask: 1,
						data: this.params,
					})
					if (!res) {
						this.loading = false
					} else {
						this.util.message('保存成功', 1, 1000)
						this.showtc = false
						this.refreshList();
						this.loading = false
					}
				}
			},
			async save2() {
				if (this.xzsxz.trim() == '') return this.util.message('请输入属性值', 3)
				this.loading2 = true
				let res = await this.util.request({
					'url': this.api.SaveAVal,
					method: 'POST',
					mask: 1,
					data: {
						name: this.xzsxz,
						pid: this.flInfo.id
					},
				})
				if (!res) {
					this.loading2 = false
				} else {
					this.util.message('保存成功', 1, 1000)
					this.showtc2 = false
					this.refreshList();
					this.loading2 = false
				}
			},
		},
	}
</script>
<style scoped lang="scss">
	.ggx {
		top: 20rpx;
		right: 20rpx;
	}

	.ggb {
		max-height: 55vh;
		overflow-y: scroll;
	}

	.bq {
		padding: 8rpx 24rpx;
	}

	.ggi {
		height: 60rpx;
		border-radius: 56rpx;
		padding: 0 20rpx 0 30rpx;
	}

	.jggz {
		border: 1px solid #F77C00;
		padding: 0 30rpx;
	}
</style>
